<template>
    <div>
<h2>会员显示列表</h2>
<div>
    会员名称:<input type="text" v-model="state.name" /> 
    手机号:<input type="text"  v-model="state.phone" />
      注册时间间:<input type="date"  v-model="state.date1" />
      -
      <input type="date"  v-model="state.date2" />
      <input type="button" value="查询" @click="getList" />
</div>
<table class="table table-bordered table-striped">  
   <tbody>
    <tr>
        <td>Id</td>
        <td>名称</td>
        <td>手机号</td>
        <td>身份证号</td>
        <td>注册时间</td>
        <td>操作</td>
    </tr>
    <tr v-for="item in list" >
        <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.phone }}</td>
          <td>{{ item.card }}</td>
          <td>
            {{ moment(item.sdate).format('YYYY年MM月DD日 hh:mm:ss') }}
          </td>
          <td>
            <input type="button" value="修改" />
            <input type="button" value="删除" />
          </td>
    </tr>
   </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';

import axios from 'axios';
import moment from 'moment';

const router=useRouter();
let data:any=reactive({
    state:{
        phone:'',
        name:'',
        date1:'',
        date2:''
    },
    list:[],
});

let {state,list}=toRefs(data);

onMounted(()=>{
    getList();
});

const getList=()=>{
    let obj={
        phone:state.value.phone,
        name:state.value.name,
        date1:state.value.date1,
        date2:state.value.date2
    }
    axios({
        url:'/api/Member/GetMembers/GetMembers',
        method:'get',
        params:obj,
    })
    .then((res)=>{
        list.value=res.data.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>